<template>
  <div class="department-container">
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
          <el-row>
            <el-col :span="20">
              <span>{{ compony.name }}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>负责人</el-col>
                <!-- 下拉菜单 element -->
                <el-col>
                  <el-dropdown>
                    <span> 操作<i class="el-icon-arrow-down" /> </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="addDepart()">
                        添加子部门
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
        <!-- card body -->
        <el-tree
          :data="departdata"
          :props="defaultProps"
          default-expand-all=""
          @node-click="handleNodeClick"
        >
          <template #default="{ data }">
            <el-row style="width: 100%">
              <el-col :span="20">{{ data.name }}</el-col>
              <el-col :span="4">
                <el-row>
                  <el-col :span="12">
                    {{ data.manager || "===" }}
                  </el-col>
                  <el-col :span="12">
                    <el-dropdown>
                      <span>操作<i class="el-icon-arrow-down" /> </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="addDepart(data)">
                          添加子部门
                        </el-dropdown-item>
                        <el-dropdown-item @click.native="addDepart(data, 2)">
                          编辑部门
                        </el-dropdown-item>
                        <el-dropdown-item @click.native="delDepart(data, 1)">
                          删除部门
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
    </div>
    <pop-sheet
      ref="popsheet"
      :showdialog="showpop"
      :current-dept="currentDept"
      :departdata="departdata"
      @close-sheet="showpop = $event"
      @get-list="getDepart"
    />
  </div>
</template>

<script>
import { getDepartments } from '@/api/table'
import { toTreeData } from '@/utils'
import PopSheet from './components/popsheet.vue'
import { delDepartments } from '@/api/department'
export default {
  components: {
    PopSheet
  },
  data () {
    return {
      departdata: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      compony: { name: '', manager: '' },
      showpop: false,
      currentDept: null
    }
  },
  created () {
    this.getDepart()
  },
  methods: {
    async delDepart (data) {
      try {
        await this.$confirm(`确认删除${data.name}吗`, '删除部门')
        if (data.children) {
          return this.$message.error('该部门下尚有子部门,不能删除')
        }
        await delDepartments(data.id)
        this.getDepart()
      } catch (error) {
        console.log(error)
      }
      // try {
      //   // const res = await delDepartments()
      // } catch (error) {

      // }
    },
    addDepart (data, type) {
      this.showpop = true
      this.currentDept = data
      if (type === 2) {
        this.$refs.popsheet.getDepart(data.id)
      }
    },
    async getDepart () {
      try {
        const res = await getDepartments()
        this.departdata = toTreeData(res.depts)
        this.compony.name = res.companyName
        this.compony.manager = res.companyManage
      } catch (error) {
        console.log(error)
      }
    },
    handleNodeClick (data) {
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
